草庐IT

vue 组件的引用

全部标签

javascript - enzyme 浅渲染正在渲染子组件

我正在尝试浅渲染组件以执行一些基本的单元测试。我正在执行此操作的组件有两个子组件,每个子组件根据父组件渲染多次。当查询浅渲染组件时,子元素也被完全渲染,这意味着子元素的HTML元素也可以访问。我正在使用Karma、Browserify、Jasmine和Enzyme,如果需要,可以发布每个的配置。以前有人见过类似的行为吗? 最佳答案 这是正确的行为。与enzyme的其他渲染方法不同的是,它不调用任何生命周期方法,也不转换为真正的html,但它会渲染它的所有子项和子项的子项等等。 关于jav

javascript - React 组件在其 props 方面必须表现得像纯函数吗?

我正在浏览React文档并阅读这一行(粗体显示他们的):AllReactcomponentsmustactlikepurefunctionswithrespecttotheirprops.这是避免意外行为的严格要求还是设计原则?Facebook提供的“不纯”函数示例是修改其输入的函数。但是React组件似乎可以修改它作为输入接收的Prop(我已经从他们自己的示例中复制了下面的示例)。CodePen:ImpureComponentw/RespecttoProps?JSX代码:varWithdraw=React.createClass({render(){this.props.accoun

javascript - angular 2 ngfor 在数组中显示组件

我有一个组件数组,我想显示该数组中的现有组件,但它不起作用,我怀疑在ngfor中创建并显示了一个新组件,而不是数组中的组件,因为我确实看到了新组件组件已创建但具有默认值而不是传递给它们的当前值,我做错了什么?html:typescript:if(this.visualDivArray.length 最佳答案 让您的VisualTextDivComponent创建一个对象数组。将该数组传递给ngFor。然后将数组的每个项目传递到您的app-visual-text-div组件中,如下所示:curLineCounter或更好的名称,是ap

javascript - 在 Vue.js 中注入(inject) <head>

我有一些外部脚本需要加载到各种页面上,例如GooglePlacesAutocomplete、FacebookAPI等。显然,将它们加载到每条路线上是没有意义的,但是文档并未解决这种相当常见的情况。此外,Vue实例挂载到正文中的标签上,因为themountedelementwillbereplacedwithVue-generatedDOMinallcases.Itisthereforenotrecommendedtomounttherootinstancetoor.现实世界的应用程序目前如何处理这种情况? 最佳答案 我推荐使用htt

javascript - Vue.js 从模板中分离样式

我使用带有的模板出于CMS原因,必须靠近其div的block。当我运行Vue.js时,它似乎删除了样式block,说...-TemplatesshouldonlyberesponsibleformappingthestatetotheUI.Avoidplacingtagswithside-effectsinyourtemplates,suchas,astheywillnotbeparsed.我能做什么?varapp=newVue({el:'#app'});#div_123{background:http://placehold.it/850x150;}@mediascreenand(m

javascript - 容器组件是否应该*始终*连接​​到 Redux?

我即将开始一个新的React项目,并尝试利用我以前的知识来创建一些关于我如何构建应用程序的规则。有些事情我认为是真的:Redux保存整个应用程序的“主要”数据如果需要跨应用程序共享,Redux可以保存UI状态(例如,可以从任何地方启动的全局模态窗口)如果不需要在应用中的其他任何地方共享该状态,则组件可以使用setState保持它们自己的状态。应尽可能使用无状态组件当我创建一个需要来自Redux的状态的组件时,我将创建FooContainer.js和FooComponent.js文件-Redux连接代码将位于容器中.应用程序的很大一部分是UI繁重的,并且有很多UI逻辑/状态正在进行,但不

javascript - 在 vue.js 模板中包含外部脚本

我是Vue.js和web-pack的新手,所以我决定使用vue-cli(webpack)来构建初始应用程序。我试图在模板中包含一个外部脚本(例如),这在全局范围内(对于每个页面/组件)都不需要,但是Vue警告说这是不允许的。我的index.html文件与最初生成的文件类似:App我的App.vue也和生成的类似:我有一条路线到/upload在我的路由文件中,它映射到需要dropzone.js(外部脚本)的上传组件。我可以将它包含在我的index.html中,类似于加载Bootstrap的方式,但是当只有这个组件需要它时,为每个页面/组件加载它似乎不太理想。但是,如上所述,我无法将它直接

javascript - 将 css 注入(inject) Vue 组件?

见下文my-component.vue。此组件需要可主题化。它需要获取外部css表,因为我需要允许其他开发人员自定义其内部外观。除了acceptajavascriptobject还有其他方法吗??.A{background-color:green;}.B{background-color:red;}.C{background-color:yellow} 最佳答案 在你的组件中:exportdefault{props:{boxStyle:{type:String,default:'box-default'}}}.box-default

javascript - React/Mobx - 组件正在重新渲染,但未调用 componentWillReceiveProps()

我有React/Mobx应用程序。当我在商店中进行更改时,组件正在更新(重新渲染),但我需要进行一些比较以添加更多功能,因此我想使用componentWillReceiveProps(nextProps)并将nextProps与this.props进行比较。不知何故,它没有被调用。任何想法,我做错了什么,或者我还能做些什么来获得它? 最佳答案 tl;dr:使用componentWillUpdate和componentDidUpdate作为prop传递的对象Store永远不会改变,即使它的内容发生变化。使用@observable的技巧

javascript - TypeScript 可更新和枚举引用

我有一个用JavaScript编写的外部SDK,我正在使用它。这些模块之一,Blob是可更新的,但也公开了一个枚举FooEnum(成员Bar和Baz).在JavaScript中使用此SDK的代码如下:constblobInstance=newSdk.Blob();constfooType=Sdk.Blob.FooEnum.Baz;我现在正在尝试编写一个接口(interface),我可以将此SDK转换到该接口(interface),以提供一些类型安全性。这是我到目前为止所得到的:interfaceBlobInterface{}enumFoo{Bar,Baz}interfaceSdk{Bl